<template>
    <transition
            name="tran_rank"
            enter-active-class="animated flipInX"
            leave-active-class="animated flipOutX"
    >
    <div class="login" v-if="show">
        <el-card class="box-card">
            <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="70px" class="demo-ruleForm">
                <el-form-item
                        label="用户名"
                        prop="username"
                        :rules="[
      { required: true, messusername: '用户名不能为空'},
      { type: 'number', messusername: '用户名必须为数字值'}
    ]"
                >
                    <el-input type="username" v-model.number="numberValidateForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item
                        label="密码"
                        prop="password"
                        :rules="[
      { required: true, messusername: '密码不能为空'},
      { type: 'number', messusername: '密码必须为数字值'}
    ]"
                >
                    <el-input type="password" v-model.number="numberValidateForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    </transition>
</template>

<script>
    import {log} from '@/assets/js/util.js'
    export default{
        name: 'login',
        data () {
            return {
                msg: 'login',
                show:false,
                numberValidateForm: {
                    username: '',
                    password:'',
                }
            }
        },
        methods:{
            init:function () {

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        log('submit!');
                    } else {
                        log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        mounted:function () {
            this.show = true
            this.init()
        }
    }
</script>

<style>
    .login{
        width: 400px; height: 200px;
        position: absolute;
        left: 0; top: 0; right: 0; bottom: 0;
        margin: auto;
    }
</style>